<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">超级购物街</div></nav-bar>
    <tab-control :titles="['流行','新款','精选']" @tabClick="tabClick" ref="tabControl1" v-show="isTabFixed"></tab-control>

    <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll" @pullingUp="loadMore"
            :pull-up-load="true">
      <div>
        <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
        <recommend-view :recommends="recommends"></recommend-view>
        <feature-view></feature-view>
        <tab-control :titles="['流行','新款','精选']" @tabClick="tabClick" ref="tabControl2"></tab-control>
        <goods-list :goods="showGoods"></goods-list>
      </div>
    </scroll>

    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>

</div>
</template>

<script>
  import HomeSwiper from "./childComps/HomeSwiper";
  import RecommendView from "./childComps/RecommendView";
  import FeatureView from "./childComps/FeatureView";

  import NavBar from "../../components/common/navbar/NavBar";
  import TabControl from "../../components/content/tabControl/TabControl";
  import GoodsList from "../../components/content/goods/GoodsList";
  import GoodsListItem from "../../components/content/goods/GoodsListItem";
  import Scroll from "../../components/common/scroll/Scroll";
  import BackTop from "../../components/content/backTop/BackTop";


  import {getHomeMultidata, getHomeGoods} from '../../network/home';
  import {debounce} from "../../common/utils";
  import {itemListenerMixin} from "../../common/minxin";


  export default {
    name: "Home",
    components: {
      RecommendView,
      NavBar,
      HomeSwiper,
      FeatureView,
      TabControl,
      GoodsList,
      GoodsListItem,
      Scroll,
      BackTop
    },
    data() {
      return {
        banners: [],
        recommends: [],
        goods: {
          'pop': {page: 1, list: []},
          'new': {page: 1, list: []},
          'sell': {page: 1, list: []},
        },
        currentType: 'pop',
        isShowBackTop: false,
        topOffsetTop:0,
        isTabFixed:false,
        saveY:0,
      }
    },
    mixins:[itemListenerMixin],
    computed: {
      showGoods() {
        return this.goods[this.currentType].list;
      }
    },
    created() {
      // 1.请求多个数据
      this.HomeMultidata();
      //2.请求商品数据
      this.HomeGoods('pop');
      this.HomeGoods('new');
      this.HomeGoods('sell');

    },
    mounted() {
      // //1.监听GoodsListItem中图片加载是否完成
      // const refresh = debounce(this.$refs.scroll.refresh,200)
      // //对监听的事件进行保存
      // this.itemImgListener = () => {
      //   refresh()
      // }
      // this.$bus.$on('itemImageLoad',this.itemImgListener)

      //  在这里使用了混入，上面的代码不用了

    },
    destroyed() {
      //销毁时
      console.log('销毁了Home组件')
    },
    activated() {
    //  进入时
    //   console.log("activated")
      this.$refs.scroll.refresh()
      //必须要先refresh再scrollTo BUG就不会复现
      this.$refs.scroll.scrollTo(0,this.saveY,0)

    },
    deactivated() {
    //  离开时
    //   console.log('deactivated')
    //  保存Y值
      this.saveY = this.$refs.scroll.getScrollY()
    //  取消全局事件的监听
      this.$bus.$off('itemImgLoad',this.itemImgListener)
    },
    methods: {
      /**网络请求相关代码**/
      HomeMultidata() {
        getHomeMultidata().then(res => {
          // console.log(res.data.data)
          this.banners = res.data.data.banner.list;
          this.recommends = res.data.data.recommend.list;
        })
      },
      HomeGoods(type) {
        const page = this.goods[type].page
        getHomeGoods(type, page).then(res => {
          // console.log(res.data.data.list)
          this.goods[type].list.push(...res.data.data.list)
          this.goods[type].page += 1
          //完成上拉加载更多
          this.$refs.scroll.finishPullUp()
        })
      },
      /**事件监听相关**/
      tabClick(index) {
        // console.log(index)
        switch (index) {
          case 0:
            this.currentType = 'pop'
            break
          case 1:
            this.currentType = 'new'
            break
          case 2:
            this.currentType = 'sell'
            break
        }
        this.$refs.tabControl1.currentIndex = index;
        this.$refs.tabControl2.currentIndex = index;
        //点击tabcontrol栏 页面上移到tabcontrol位置
        this.$refs.scroll.scrollTo(0,-this.topOffsetTop)

      },
      backClick() {
        this.$refs.scroll.scrollTo(0, 0);
      },
      //监听滚动
      contentScroll(position) {
        // console.log(position)
        // 1.判断backtop是否显示
        this.isShowBackTop = (-position.y) > 1000
        // 2.决定tabcontrol是否吸顶（position:fixed）
        this.isTabFixed = (-position.y) > this.topOffsetTop
      },
      loadMore() {
        this.HomeGoods(this.currentType)

      },
      swiperImageLoad(){
        //  2.获取tabControl的offSetTop,所有的组件都有一个属性叫$el,用户获取组件的属性
        // console.log(this.$refs.tabControl.$el.offsetTop)
        this.topOffsetTop = this.$refs.tabControl2.$el.offsetTop;
      },
    }
  }
</script>

<style scoped>
  #home {
    height: 100vh;
    position: relative;
  }

  .home-nav {
    background-color: var(--color-tint);
    font-weight: 700;
    color: white;

    /*在使用浏览器原生滚动时，为了让导航不跟随一起滚动*/
    /*position: fixed;*/
    /*left: 0;*/
    /*right: 0;*/
    /*top: 0;*/
    /*z-index: 9;*/
  }

  .tab-control {
    position: sticky;
    top: 44px;
    z-index: 9;
  }

  .content {
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }


</style>
